<template>
    <div>
        <el-descriptions title="信息" direction="vertical" :column="5" size="large" extra :border="true">
            <template #extra>
                <el-space wrap :size="50">
                    
                    <span style="width:20px">
                        <el-button type="primary" @click="primaryClick()" >修改</el-button>
                    </span>
                    <el-tooltip class="box-item" effect="light" content="该类型下还有子类，无法删除" placement="bottom"
                        :disabled="!disabledDangerBoolean" :enterable="true">
                        <span>
                            <el-button type="danger" :disabled="disabledDangerBoolean" @Click="dangerClick()">删除</el-button>
                        </span>
                    </el-tooltip>
                </el-space>

            </template>
            <el-descriptions-item label="名称">{{ openAllData.industryName }}</el-descriptions-item>
            <el-descriptions-item label="添加时间">{{ openAllData.createOperationRecordTime == undefined ?
                '无' : openAllData.createOperationRecordTime
                }}</el-descriptions-item>
            <el-descriptions-item label="添加人">{{ openAllData.createUserName == undefined ? '无' :
                openAllData.createUserName
                }}</el-descriptions-item>
            <el-descriptions-item label="最近修改时间">{{ openAllData.updateOperationRecordTime == undefined ?
                '无' : openAllData.updateOperationRecordTime
                }}</el-descriptions-item>
            <el-descriptions-item label="最近修改人人">{{ openAllData.updateUserName == undefined ? '无' :
                openAllData.updateUserName
                }}</el-descriptions-item>
            <el-descriptions-item label="添加备注" :span="3">{{openAllData.createOperationRecordRemarks ==
                undefined ? '无' : openAllData.createOperationRecordRemarks}}</el-descriptions-item>
            <el-descriptions-item label="修改备注" :span="2">{{openAllData.updateOperationRecordRemarks ==
                undefined ? '无' : openAllData.updateOperationRecordRemarks}}</el-descriptions-item>
        </el-descriptions>
        <IndustryDisalogFormVisible :modelValue="openAllData" :openShow="show" @backData="backData" @isUpdate="isUpdate"></IndustryDisalogFormVisible>
        
    </div>
    
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { computed, watch, watchEffect } from '@vue/runtime-core'
import IndustryDisalogFormVisible from './industry/IndustryDisalogFormVisible.vue'
import { ElMessage, ElMessageBox ,ElNotification} from 'element-plus'
import { useStore } from 'vuex'
import axios from 'axios'

export default {
  components: { IndustryDisalogFormVisible },
    props: ['modelValue'],
    emits: ['backData','isUpdateData','isdelUpdateDate'],
    setup(props,{emit}){
       const store = useStore()
        const disabledDanger = ref(true)
        //数据接收地
        const data = reactive({
            parentData:[],
            children:Object
        })

        
        //接收数据
        data.parentData = props.modelValue


        //console.log( data.parentData,100)



        //组件数据计算属性
        const openAllData = computed(()=>{
            //console.log("fsdf")
            return data.parentData
        })
        //判断该类型下是否有子类
        const disabledDangerBoolean = computed(() => {
            if(data.parentData.level == 3){
                if(data.parentData.accountTypeList.length <= 0){
                    disabledDanger.value = false
                }else{
                    disabledDanger.value = true
                }
            }else{
                if(data.parentData.industryAccountType.length <= 0){
                    disabledDanger.value = false
                }else{
                    disabledDanger.value = true
                }
            }
            return disabledDanger.value
        })

        //监听器
    
        /* let show = ref(false)
        setTimeout(()=>{
            console.log(props.modelValue,'五秒后的值')
        },5000) */


        //监听父组件数据更新子组件数据
        watch(() => props.modelValue, function (newVal, oldVal) {
            //console.log('sd')
            data.parentData = newVal
        }, {
            deep: true,
            immediate: false
        })
        


        /* watchEffect(()=>{

            console.log(props.modelValue,'立即执行监听器')
        });
 */
//************************************************************************** */
//删除修改操作
        //修改
        let show = ref(false)
        function primaryClick(){
            show.value = true
        }
        //子主键传过来的值
        function backData(a){
            show.value = a
        }
        
        //修改
        function dangerClick(a){
            ElMessageBox.confirm(
                '确认是否删除?',
                '请确认',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {//确认回调函数

                    axios.delete("/api/industry/deleteIndustryById",{
                        params:{
                            industryId:data.parentData.industryId
                        }
                    }).then((response)=>{
                        if(response.status == 200){
                            if(response.data.code){
                                store.commit('insertData',response.data.data)
                                emit("isdelUpdateDate",true)
                                ElNotification({
                                    title: '操作成功',
                                    message: '成功保存',
                                    type: 'success',
                                })
                            }
                        }
                    })
                        
                    
                }).catch(() => {//取消回调函数
                    ElMessage({
                        type: 'info',
                        message: '已取消操作',
                    })
                })
        }
        function isUpdate(a){
            if(a){
                emit('isUpdateData',true)
            }
        }

        return{
            openAllData,
            disabledDangerBoolean,
            show,
            
            primaryClick,
            backData,
            dangerClick,

            isUpdate,
            
            
        }
    },
}
</script>

<style>

</style>